<template>
  <div class="unit-info">
    <el-form
      :model="unitForm"
      ref="unitFormRef"
      :rules="queryRules"
      label-width="130px"
    >
      <!-- <div class="search-button">
        <el-button type="primary" @click="handleAddSave"
          ><img src="@/assets/images/Submit.png" alt="" /> 提交</el-button
        >
        <el-button @click="handleBack" color="#efbf00"
          ><img src="@/assets/images/back.png" alt="" />
          <span style="color: #ffffff">返回</span>
        </el-button>
      </div> -->
      <div class="middle-top">
        <div class="middle-title">
          <img src="@/assets/images/title-icon.png" alt="" />
          人员信息
        </div>
      </div>
      <div class="info">
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  label-align="center"
                  align="center"
                  :column="2"
                  class="limited-width"
                >
                  <el-descriptions-item
                    label="姓名"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                    width="230px"
                    >{{
                        unitForm.screeningPersonnelName
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="联系方式"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                  >
                  {{
                        unitForm.phone
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="身份证"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    {{ unitForm.identityCard }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="实际住址"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ unitForm.currentResidentialAddress }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="工作单位"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ unitForm.workUnit }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="职业"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                        unitForm.jobOccupation
                    }}</el-descriptions-item
                  >
                </el-descriptions>
              </div>
     

      <div class="middle-top">
        <div class="middle-title">
          <img src="@/assets/images/title-icon.png" alt="" />
          管控情况
        </div>
        
      </div>
      <div>
            <el-form-item
            label=""
            label-width="0"
            prop="remark"
          >
            <el-input
              v-model="unitForm.remark"
              clearable
              type="textarea"
                rows="4"
                maxlength="500"
                placeholder="请填写"
              class="search-input"
            />
          </el-form-item>
        </div>
      <!-- 表格数据 -->
    
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Selectmap from "./selectmap";
import {
  addinstitution,
  addControlApi,
  selectDeptListByUser,
  getPepleInfoApi,
} from "@/api/erp/unit";
import { getAreaList } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";

const props = defineProps({
  // 操作类型
  showdialog: {
    type: Boolean,
    default: false,
  },
  //行业主管下拉
  supervisorList: {
    type: Array,
    default: [],
  },
  //单位类型数据
  unittypeList: {
    type: Array,
    default: [],
  },
  //单位级别下拉
  unitlevelList: {
    type: Array,
    default: [],
  },
});

const userStore = useUserStore();

const emit = defineEmits(["refreshList"]);

let pagestatus = ref(null);

let options = ref([]);

const areaprops = {
  lazy: true,
  checkStrictly: true,
  lazyLoad(node, resolve) {
    const { level } = node;
    let datas = [];
    setTimeout(() => {
      let code = 1;
      if (level != 0) {
        code = node.data.value;
      }
      getAreaList({ pid: code }).then((response) => {
        if (response.data && response.data.length) {
          datas = response.data.map((item, i) => ({
            value: item.value,
            label: item.label,
            leaf: level >= 3,
            // disabled: level < 3, // 这里可以设置为 true 来禁用这个选项
          }));
        } else {
          datas = [];
        }
        resolve(datas);
      });
    }, 200);
  },
};
//省市区校验规则
const provinceValidate = (rule, value, callback) => {
  // const { province, city, area } = projectForm.value;
  // if (!province || !city || !area) {
  //   callback(new Error("请选择省市区"));
  // } else {
  //   callback();
  // }
  const { region } = unitForm.value;
  console.log("region.length", region.length);
  if (region.length == 0) {
    console.log("zhixn");
    callback(new Error("请选择省市区街道"));
  } else if (region.length < 4) {
    console.log(2);
    callback(new Error("请选择到街道"));
  } else {
    callback();
  }
};

const useType = ref([
  {
    dictLabel: "本人使用",
    dictValue: 0,
  },
  {
    dictLabel: "单位使用",
    dictValue: 1,
  },
]);

const unitForm = ref({
    remark: '',
});

const rules = ref({
  droneBrand: [
    { required: true, message: "请输入无人机品牌", trigger: "blur" },
  ],
  uavModel: [{ required: true, message: "请输入无人机型号", trigger: "blur" }],
  purpose: [{ required: true, message: "请输入用途", trigger: "blur" }],
  droneIdentificationCode: [
    { required: true, message: "请输入无人机识别码", trigger: "blur" },
  ],
  useTypeName: [
    { required: true, message: "请选择本人/单位使用", trigger: "change" },
  ],
});

const queryRules = ref({
  remark: [{ required: true, message: "请输入管控情况", trigger: "blur" }],
  
});

//详细地址地图选择弹窗显隐
let isshowmap = ref(false);

//所属派出所
const policeList = ref([]);

/**
 * @description: 地图详细地址
 */
const selectaddress = () => {
  isshowmap.value = true;
};
//表格删除
const handleDelete = (tabIndex) => {
  unitForm.value.personneUavInfoRespVos.splice(tabIndex, 1);
};

/**
 * @description: 联级处理省市区操作
 * @param {String} type 类型
 */
const handlerregion = (value) => {
  if (value) {
    switch (value.length) {
      case 1:
        unitForm.value.provinceId = value[0];
        break;
      case 2:
        unitForm.value.provinceId = value[0];
        unitForm.value.cityId = value[1];
        break;
      case 3:
        unitForm.value.provinceId = value[0];
        unitForm.value.cityId = value[1];
        unitForm.value.zoneId = value[2];
        break;
      case 4:
        unitForm.value.provinceId = value[0];
        unitForm.value.cityId = value[1];
        unitForm.value.zoneId = value[2];
        unitForm.value.streetId = value[3];
        break;
      default:
        break;
    }
  } else {
    unitForm.value.region = [];
    unitForm.value.provinceId = null;
    unitForm.value.cityId = null;
    unitForm.value.zoneId = null;
    unitForm.value.streetId = null;
  }
};

/**
 * @description: 提交
 * @param {Object} customerFormRef 客户表单引用
 */
const unitFormRef = ref(null);
// 表格新增
const addTable = () => {
  let info = {
    droneBrand: "",
    uavModel: "",
    purpose: "",
    droneBrand: "",
    droneIdentificationCode: "",
    useTypeName: null,
  };
  unitForm.value.personneUavInfoRespVos.push(info);
};

//处理编辑
const handleEdit = async (row) => {
  const res = await getPepleInfoApi(row.screeningPersonnelId);
  unitForm.value = res.data
  unitForm.value.remark = res.data.controlSituation
  pagestatus.value = "edit";
  // if (unitForm.value.controlTypeeName === '已管控') {
  //   unitForm.value.controlType = 3;
  // }else if (unitForm.value.controlTypeeName === '待管控') {
  //   unitForm.value.controlType = 3;
  // }
};

// 处理提交
const handleSubmit = async (row) => {
  console.log("提交》》》》》》》》》》", row);
  console.log(unitForm.value);
  await unitFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          console.log("unitForm.value", unitForm.value);
          addControlApi(unitForm.value).then((res) => {
            if (res.code === 200) {
              emit("update:showControladd", false);
              emit("refreshList");
              ElMessage.success(res.msg);
            } else {
              ElMessage.error(res.msg);
            }
          });
        })
        .catch(() => {});
    }
  });
};

/**
 * @description:  获取派出所
 * @param {Number} id
 */
const getpolicestation = () => {
  let obj = {
    deptType: 1,
    provinceId: unitForm.value.provinceId,
    cityId: unitForm.value.cityId,
    zoneId: unitForm.value.zoneId,
    streetId: unitForm.value.streetId,
  };
  selectDeptListByUser(obj).then((res) => {
    policeList.value = res.data;
  });
};

onMounted(() => {
  if (userStore.deptType == 0 || userStore.deptType == 1) {
    userStore.provinceId && unitForm.value.region.push(userStore.provinceId);
    userStore.cityId && unitForm.value.region.push(userStore.cityId);
    userStore.zoneId && unitForm.value.region.push(userStore.zoneId);
    userStore.streetId && unitForm.value.region.push(userStore.streetId);
    handlerregion(unitForm.value.region);
    getpolicestation();
    if (userStore.deptType == 1) {
      unitForm.value.policeStationId = userStore.deptId;
    }
    if (userStore.industryManagementId) {
      unitForm.value.industryId = userStore.industryManagementId;
    }
  }
});

defineExpose({
  handleEdit,
  handleSubmit,
});
</script>

<style scoped lang="scss">
.unit-info {
  // margin-top: 20px;
  padding: 0 20px;
}
.middle-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  .middle-title {
    font-size: 16px;
  }
}
:deep(.el-input-group__append) {
  padding: 0px 2px !important;
}
.search-button {
}
</style>
